import React, { Component } from 'react'
import PropTypes from "prop-types"
import {
  Form,
  Select,
  Input
} from 'antd/lib/index'

const Item = Form.Item
const option = Select.Option

// 添加分类的组件
class AddForm extends Component {
  static propTypes = {
    categories: PropTypes.array.isRequired, // 一级分类数组
    setForm: PropTypes.func.isRequired, // 用来传递 form 对象的函数
    parentId: PropTypes.string.isRequired, // 父级分类 id
  }

  UNSAFE_componentWillMount () {
    // 将 from对象通过 setForm() 传递给父组件
    this.props.setForm(this.props.form)
  }

  render () {
    const { getFieldDecorator } = this.props.form
    const { categories, parentId } = this.props
    return (
      <Form onSubmit={this.handleSubmit}>
        <Item>
          {
            getFieldDecorator('parentId', {
              initialValue: parentId
            })(
              <Select>
                <option value='0'>一级分类</option>
                {
                  categories.map(c => <option value={c._id}>{c.name}</option>)
                }
              </Select>
            )
          }
        </Item>
        <Item>
          {
            getFieldDecorator('categoryName', {
              initialValue: '',
              rules: [
                { required: true, message: '分类名称必须输入' }
              ]
            })(
              <Input placeholder='请输入分类名称' />
            )
          }
        </Item>
      </Form>
    )
  }
}

export default Form.create()(AddForm)
